<template>
  <div class="container" ref="vanlist">
    <navbar
      :vaniconL="true"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="search"
      @clickLeft="goBack"
      @clickRight="search"
    >{{$t('covlist.nav_title')}}</navbar>
    <van-sticky :offset-top="45">
      <transition name="van-slide-down">
        <van-search
          v-model="searchVal"
          v-show="searchFlag"
          show-action
          :placeholder="$t('covlist.enter_search')"
          @search="onSearch"
          @cancel="onCancel"
          @input="onInput"
        />
      </transition>
    </van-sticky>
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="$t('covlist.no_more')"
      :loading-text="$t('detailList.loading')"
      :immediate-check="false"
      offset="10"
      @load="onLoad"
    >
      <div class="list-child" v-for="(item,index) in covlist" :key="index">
        <p class="date">{{$t('covlist.upadte_date')}} {{item.createTime}}</p>
        <van-divider />
        <div class="child-box">
          <div class="left">
            <img class="logo" src="@/assets/images/xinguan.png" alt />
            <div class="mes">
              <span class="name">{{item.realName}}</span>
              <span
                class="sex"
              >{{item.gender == '0' ? $t('covlist.female'):item.gender == '1' ? $t('covlist.male'): '*'}} {{item.age}} {{item.departmentName}}</span>
            </div>
          </div>
          <div class="right">
            <van-button
              type="primary"
              round
              size="small"
              color="linear-gradient(211deg, #5d5cbf 0%, #4775d9 100%)"
              @click="viewDetail(item)"
            >{{$t('covlist.view_dicom')}}</van-button>
            <van-button
              type="primary"
              round
              size="small"
              @click="viewReport(item)"
              color="linear-gradient(211deg, #5d5cbf 0%, #4775d9 100%)"
            >{{$t('covlist.view_report')}}</van-button>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { Search } from "vant";
import { getCovList, getLungInfo } from "@/api/covlist.js";
import navbar from "@/components/navbar";
import { Toast } from "vant";
import { mapGetters } from "vuex";
export default {
  name: "covidList",
  components: { navbar },
  data() {
    return {
      searchVal: null,
      searchFlag: false,
      loading: true,
      finished: false,
      covlist: [],
      pageNow: 1,
      pageSize: 8,
      lungid: 1
    };
  },
  computed: {
    ...mapGetters(["covlistSite"])
  },
  watch: {
    searchVal(val) {
      if (val == "" || val == null) {
        this.searchVal = null;
      }
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.replace({ path: "/readList" });
    },
    // 搜索
    search() {
      this.searchFlag = !this.searchFlag;
    },
    onInput(val) {
      if (val == null || val == "") {
        this.searchVal = null;
        this.pageNow = 1;
      }
    },
    // 确认搜索
    onSearch(val) {
      let { pageNow, pageSize, lungid } = this;
      this.searchVal = val;
      this.pageNow = 1;
      this.loading = true;
      this.finished = false;
      this.covlist = [];
      this.onLoad();
    },
    // 取消
    onCancel() {
      window.scrollTo(0, 0);
      this.searchFlag = false;
      this.searchVal = null;
      this.pageNow = 1;
      this.loading = true;
      this.finished = false;
      this.covlist = [];
      this.onLoad();
    },
    // 滑动加载
    async onLoad() {
      let { pageNow, pageSize, lungid, searchVal } = this;
      setTimeout(() => {
        getCovList(pageNow, pageSize, searchVal, lungid).then(res => {
          this.loading = false;
          if (res.status.code === 200) {
            let list = (res.data && res.data.patients) || [];
            if (pageNow > 1) {
              this.covlist = [...this.covlist, ...list];
            } else {
              this.covlist = list;
            }
            // 如果当前页数 = 总页数，则已经没有数据
            if (pageNow === res.data.pageAmount) {
              this.finished = true;
            }
            // 如果总页数大于当前页码，页码+1
            if (res.data.pageAmount > pageNow) {
              this.pageNow++;
            }
          }
        });
      }, 1000);
    },
    // 跳转
    viewDetail(item) {
      let id = item.id;
      getLungInfo(id, null).then(res => {
        if (res.status.code == 200) {
          let CTData = res.data.ctdata;
          if (CTData.length == 1) {
            this.$router.replace({
              path: "/detail",
              query: {
                dsId: CTData[0].dsId
              }
            });
          } else if (CTData.length > 1 || CTData.length < 1) {
            this.$router.replace({
              path: "/detailList",
              query: {
                id: id
              }
            });
          }
        }
      });
    },
    //
    viewReport(item) {
      let id = item.id;
      getLungInfo(id, null).then(res => {
        if (res.status.code == 200) {
          let CTData = res.data.ctdata;
          if (CTData.length == 1) {
            this.$router.replace({
              path: "/reportDetail",
              query: {
                dsId: CTData[0].dsId,
                patientId: item.id
              }
            });
          } else if (CTData.length > 1 || CTData.length < 1) {
            this.$router.replace({
              path: "/detailList",
              query: {
                id: id
              }
            });
          }
        }
      });
    }
  },
  created() {
    this.onLoad();
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == "/readList") {
      let position = 0;
      this.$route.meta.keepAlive = false;
      this.$store.commit("position/SAVE_POSITION", position);
      next();
    } else {
      let position = this.$refs.vanlist.scrollTop;
      this.$route.meta.keepAlive = true;
      this.$store.commit("position/SAVE_POSITION", position);
      next();
    }
  },
  mounted() {
    // var startX, startY, endX, endY;
    // window.addEventListener("touchstart", function(e) {
    //   startX = e.touches[0].pageX;
    //   startY = e.touches[0].pageY;
    //   e = e || window.event;
    // });
    // window.addEventListener("touchend", function(e) {
    //   const that = this;
    //   endX = e.changedTouches[0].pageX;
    //   endY = e.changedTouches[0].pageY;
    //   upOrDown(startX, startY, endX, endY);
    // });
    // var that = this;
    // function upOrDown(startX, startY, endX, endY) {
    //   //   console.log(that)
    //   // console.log(that.$refs.vanlist)
    //   let direction = GetSlideDirection(startX, startY, endX, endY);
    //   switch (direction) {
    //     case 0:
    //       console.log("没滑动");
    //       // window.removeEventListener(
    //       //   "touchmove",
    //       //   function(e) {
    //       //     e.preventDefault();
    //       //     e.stopPropagation();
    //       //   },
    //       //   { passive: false }
    //       // );
    //       break;
    //     case 1:
    //       console.log("向上");
    //       // window.removeEventListener("touchmove", pre, { passive: false });
    //       break;
    //     case 2:
    //       console.log("向下");
    //       // window.removeEventListener("touchmove", pre, { passive: false });
    //       break;
    //     case 3:
    //       console.log("向左");
    //       // window.addEventListener("touchmove", pre, { passive: false });
    //       break;
    //     case 4:
    //       console.log("向右");
    //       // window.addEventListener("touchmove", pre, { passive: false });
    //       break;
    //     default:
    //       break;
    //   }
    // }
    // function GetSlideDirection(startX, startY, endX, endY) {
    //   const that = this;
    //   let dy = startY - endY;
    //   let dx = endX - startX;
    //   let result = 0;
    //   //如果滑动距离太短
    //   if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
    //     return result;
    //   }
    //   let angle = GetSlideAngle(dx, dy);
    //   if (angle >= -45 && angle < 45) {
    //     result = 4;
    //   } else if (angle >= 45 && angle < 135) {
    //     result = 1;
    //   } else if (angle >= -135 && angle < -45) {
    //     result = 2;
    //   } else if (
    //     (angle >= 135 && angle <= 180) ||
    //     (angle >= -180 && angle < -135)
    //   ) {
    //     result = 3;
    //   }
    //   return result;
    // }
    // function GetSlideAngle(dx, dy) {
    //   return (Math.atan2(dy, dx) * 180) / Math.PI;
    // }
    // function pre(e) {
    //   e.preventDefault();
    //   e.stopPropagation();
    // }
    // let startX, startY;

    // document.addEventListener("touchstart", function(e) {
    //   startX = e.touches[0].pageX;

    //   startY = e.touches[0].pageY;
    // });

    // document.addEventListener(
    //   "touchmove",
    //   function(e) {
    //     var moveX = e.touches[0].pageX;

    //     var moveY = e.touches[0].pageY; //因为上下滑动的时候多少左右会带一点横移呀 //比较横移距离与垂直移动距离的大小，哪个大就是往哪个方向移动啊

    //     if (Math.abs(moveX - startX) > Math.abs(moveY - startY)) {
    //       console.log(222);
    //       e.preventDefault();
    //     }
    //   },
    //   { passive: false }
    // );
  },
  activated() {
    this.$nextTick(() => {
      let position = this.covlistSite;
      this.$refs.vanlist.scrollTop = position;
    });
  },
  destroyed() {}
};
</script>
<style lang='scss' scoped>
.container {
  position: relative;
  height: 100vh;
  background: #f5f5f5;
  overflow-y: scroll;
  & .van-search {
    // position: fixed;
    width: 100%;
    z-index: 1;
    box-shadow: rgb(204, 204, 204) 1px 1px 9px;
  }
  & .list-child {
    width: 94%;
    margin: auto;
    // height: 128px;
    background: #ffffff;
    border-radius: 10px;
    margin-top: 10px;
    padding: 0 15px;
    box-sizing: border-box;
    & .van-divider {
      margin: 0 0 10px 0;
    }
    & .child-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0.1rem;
      & .left {
        display: flex;
        flex-direction: row;
        & .logo {
          width: 0.6rem;
          height: 0.6rem;
          border-radius: 8px;
        }
        & .mes {
          display: flex;
          flex-direction: column;
          margin-left: 0.1rem;
          margin-top: 0.05rem;
        }
        & .name {
          font-size: 0.2rem;
          text-align: left;
          width: 1.2rem;
          height: 0.22rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        & .sex {
          font-size: 0.14rem;
          margin-top: 0.1rem;
          text-align: left;
        }
      }
      & .right {
        & .van-button {
          display: block;
          margin-bottom: 5px;
        }
      }
    }
    & .date {
      font-size: 0.12rem;
      color: #ccc;
      text-align: left;
      padding: 0.12rem 0;
    }
  }
}
</style>